<template>
  <div>
    <a-row :gutter="15">
      <a-col :span="8" v-for="(item, index) in props.videoList" :key="index" style="padding: 5px">
        <a :href="item.src">
          <a-card hoverable style="width: 300px; height: 185px; margin-bottom: 10px">
            <template #cover>
              <img :src="item.pic" referrerpolicy="no-referrer" style="width: 300px; height: fit-content" />
            </template>
          </a-card>
          <span class="title"><p v-html="item.title.length > 70 ? item.title.substring(0, 70) + '...' : item.title"></p></span>
        </a>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from 'vue';
import { video } from '@/model/data/video';
interface Props {
  videoList: video[];
}
const props = withDefaults(defineProps<Props>(), {
  videoList: () => []
});
</script>

<style scoped>
.title {
}
.title:hover {
  color: rgb(37, 159, 253);
}
</style>
